<template>
  <div>
    <el-main>
      <el-tabs value="first">
        <el-tab-pane label="基本信息" name="first">
          <div style="display: flex;line-height: 30px;">
            <div style="flex: 1;"><strong>单号：{{baseMessage.no}}</strong></div>
            <div style="flex: 1;">单据日期：{{baseMessage.ctime |paramsData}}</div>
            <div style="flex: 1;">出库时间：{{baseMessage.inputTime | paramsData}}</div>
            <div style="flex: 1;">仓库：{{baseMessage.warehouseInfo.name}}</div>
            <div style="flex: 1;">制单人：{{baseMessage.uuser}}</div>
          </div>
          <div style="display: flex;line-height: 30px;">
            <div style="flex: 1;">出库类型：{{baseMessage.type}}</div>
            <div style="flex: 1;">关联单号：{{baseMessage.relativeOrderNo}}</div>
            <div style="flex: 1;"></div>
            <div style="flex: 1;"></div>
            <div style="flex: 1;"></div>
          </div>
          <div style="line-height: 30px;">
            备注：
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs value="first" style="margin-top: 20px;">
        <el-tab-pane label="单据详情" name="first">
          <el-table :data="tableData" border style="width: 100%" height="400px">
            <el-table-column type="index" label="序号" width="60px">
            </el-table-column>
            <el-table-column prop="goodsInfo.name" label="商品">
            </el-table-column>
            <el-table-column prop="goodsInfo.detail" label="描述">
            </el-table-column>
            <el-table-column prop="unit" label="单位">
            </el-table-column>
            <el-table-column prop="qty" label="入库数量">
            </el-table-column>
            <el-table-column prop="price" label="单价">
              <template slot-scope="scope">
                <div>{{scope.row.price / 100}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="warehouseInput.total" label="金额">
              <template slot-scope="scope">
                <div>{{scope.row.price / 100 *scope.row.qty}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="warehouseArea.area_name" label="库区库位">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div style="margin-top: 20px;">
        <el-button @click="goBack">返 回</el-button>
      </div>
    </el-main>
  </div>
</template>

<script>
  import {
    handleActivePath
  } from '@/utils/routes'
  import {
    mapActions
  } from 'vuex'
  import {
    WarehouseInputqueryinput,
    WarehouseInputitemQuery,
    WarehouseinputQueryInfolist
  } from '@/api/warehouse'
  export default {
    data() {
      return {
        tableData: [],
        baseMessage: "", //基本信息
      }
    },
    async created() {
      let id = this.$route.params.id
      console.log(id);
      let data = {
        id: id
      }
      let res = await WarehouseinputQueryInfolist(data)
      console.log(res);
      // let listdata = {
      //   inputId:id
      // }
      // let list = await WarehouseInputitemQuery(listdata)
      this.tableData = res.data.warehouseOutItemsList
      // console.log("list",list);
      this.baseMessage = res.data
    },
    methods: {
      ...mapActions({
        delVisitedRoute: 'tabs/delVisitedRoute',
      }),
      async goBack() {
        const detailPath = await handleActivePath(this.$route, true)
        await this.$router.push('/roomstore/deliveryManage')
        await this.delVisitedRoute(detailPath)
      },
    },
    filters: {
      paramsData(val) {
        let date = new Date(val * 1000);
        let YY = date.getFullYear() + '-';
        let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD + " " + hh + mm + ss;
      }
    }
  }
</script>

<style>
</style>
